import React, { PureComponent } from 'react'


import { Comment, Avatar, Tooltip} from 'antd'
import moment from 'moment';
import { DeleteOutlined} from '@ant-design/icons';


export default class CommentItem extends PureComponent {
  render() {
    const { id, avatar, nickname, datetime, content } = this.props.comment

    return (
      <div>
        <Comment
          author={<a>{nickname}</a>}
          avatar={<Avatar src={avatar} alt={nickname}></Avatar>}
          content={<p>{content}</p>}
          datetime={
            <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
              <span>{moment().fromNow()}</span>
            </Tooltip>
          }
          actions={[
            <span onClick={e => this.removeItem()}><DeleteOutlined />删除评论</span>
          ]}
        />
      </div>
    )
  }

  removeItem() {
    this.props.removeComment();
  }
}
